<template>
	<view v-if="order.orderId">
		<!-- 页首 -->
		<zw-header></zw-header>

		<!-- 面包屑 -->
		<bread-crumb :pages="[{name: '交易订单', linkUrl: '/pages/order/index'}, {name: '订单详情'}]" separator="/"></bread-crumb>

		<!-- 左侧导航栏 -->
		<menu-wrapper active-index="1-3">
			<view class="title">订单详情</view>
			<view class="order-header">
				<view class="orderno">订单号：<text style="user-select: text;">{{order.orderNumber}}</text></view>
				<view class="btn-wrap">
					<view v-if="order.status == 0" class="btn" @click="orderCancel(order.orderId)">关闭订单</view>
					<navigator v-if="order.status == 5 && !order.combinationId" :url="`/pages/order/comment/detail?orderNo=${order.orderId}`" class="btn btn-primary">立即评价</navigator>
					<view class="btn" v-if="order.status==3 || order.status==6"  @click="getExpress">查看物流</view>
					<view v-if="order.status == 3" class="btn btn-primary" @click="confirmReceipt(order.orderId)">确认收货</view>
					<view v-if="order.status ==2" class="btn">订单已取消</view>
					<view v-if="order.status == 0" class="btn btn-primary"  @click="toPay(order)">立即付款</view>
				</view>
			</view>
			<view :class="['order-status', {'warnging': order.status == 0}, {'green': order.status >= 2 && order.status <= 10}]"
			 :title="order.remark">{{order.statusDesc}}</view>
			
			<view class="express-wrap" v-if="order.expressNum">
				<!-- <text class="item">物流公司：</text>
				<a class="item link">
					<text>{{order.expressName}}</text>
					<i class="icon i-right-double"></i>
				</a> -->
				<text class="item" style="user-select: text;">运单号：{{order.expressNum}}</text>
			</view>
			<view class="goods-wrap">
				<view class="goods" v-for="(item, index) in order.detailList" :key="index">
					<a :href="`#/pages/goods/index?id=${item.productId}`" target="_blank">
						<image class="thumb" :src="item.logo" mode="aspectFit"></image>
					</a>
					<view class="goodsInfo">
						<a :href="`#/pages/goods/index?id=${item.productId}`" target="_blank">
							<view class="name elip">{{item.productName}}</view>
						</a>
						<view class="subtotal">{{item.price}}元 x {{item.number}}</view>
					</view>
					<view class='goodsBtn' v-if="order.status==3 || order.status==4">
						<view class="btn" v-if="item.isReturn == 0"  @click='apply(item)'>申请退款</view>
						<view class="btn" v-if="item.isReturn == 1 && item.refundDealStatus != 5"
						 @click='refundInfo(item)'>
						 退款中</view>
						<view class="btn" v-if="item.isReturn == 1 && item.refundDealStatus == 5"
						 @click='refundInfo(item)'>
						 退款完成</view> 
					</view>
				</view>
			</view>
			<view class="other-details">
				<view class="detail-title">收货信息</view>
				<view class="item">
					<view class="name">姓<text style="width: 28px;display: inline-block;"></text>名：</view>
					<view class="value">{{order.receiver}}</view>
				</view>
				<view class="item">
					<view class="name">联系电话：</view>
					<view class="value">{{order.mobile}}</view>
				</view>
				<view class="item">
					<view class="name">收货地址：</view>
					<view class="value">{{order.province}} {{order.city}} {{order.district}}
						{{order.addr}}</view>
				</view>
			</view>
			<view class="other-details" v-if="order.payMode">
				<view class="detail-title">支付方式</view>
				<view class="item">
					<view class="name">支付方式：</view>
					<view class="value">{{order.payMode}}</view>
				</view>
			</view>
			<view class="total-amount">
				<view class="item">
					<view class="name">商品总价：</view>
					<view class="value">{{order.orderAmount.toFixed(2)}}元</view>
				</view>
				<!-- <view class="item">
					<view class="name">运费：</view>
					<view class="value">{{order.expressFee}}元</view>
				</view> -->
				<!-- <view class="item" v-if="order.discountAmount > 0">
					<view class="name">优惠金额：</view>
					<view class="value">{{order.discountAmount.toFixed(2)}}元</view>
				</view> -->
				<view class="item" v-if="order.payAmount">
					<view class="name">实付金额：</view>
					<view class="value">
						<text class="pay-amount">{{order.payAmount.toFixed(2)}}</text>元
					</view>
				</view>
			</view>
		</menu-wrapper>
		<u-popup v-model="show" mode="center" :closeable='true'>
			<view class='popBox'>
				<logistics  :wlInfo="wlData" :gData="gData"></logistics>
			</view>
		</u-popup>
		<!-- 退款申请弹窗 -->
		<zw-dialog :hidden="showRefund" title="退款" :width="450" :height="200" :showHeaderBg="false" :hideFooter="false"
		 :showFooterBg="false" borderRadius @close="showRefund = true" @cancel="showRefund = true" @confirm="orderRefund">
			<view class="form-wrap" @keydown.enter="submit">
				<view class="row">
					<view class="tit">退款理由:</view>
					 <uni-data-select
					      v-model="value"
					      :localdata="range"
					      @change="change"
					    ></uni-data-select>
				</view>
				<view class="row">
					<view class="tit">退款金额:</view>
					<text><text style="font-size: 17px;">￥</text>{{Number(refundGoods.number*refundGoods.price).toFixed(2)}}</text>
				</view>
			</view>
		</zw-dialog>
		<refundInfo ref="refundInfo"  :hidden.sync="hiddenInfo" @change="refundChange" :goodsId='goodsId'></refundInfo>
		
		<!-- 页脚 -->
		<zw-footer></zw-footer>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import logistics from '@/components/logistics.vue';
	import refundInfo from '@/pages/order/comment/refund-info.vue'
	export default {
		components: {
			menuWrapper,
			logistics,
			refundInfo
		},
		data() {
			return {
				value:'',
				order: {},
				imgList:[],
				wlData:[],
				gData:'',
				show:false,
				hiddenInfo:true,
				showRefund:true,
				refundGoods:{},//选中退款商品
				range: [
					{ value: 0, text: "订单信息拍错" },
					{ value: 1, text: "我不想要了" },
					{ value: 2, text: "地址/电话信息填错" },
					{ value: 3, text: "发货太慢" },
					{ value: 4, text: "缺货" },
				],
				goodsId:''
			}
		},
		onLoad(e) {
			if (e.orderNo) {
				this.findDetails(e.orderNo);
			} else {
				uni.redirectTo({
					url: '/pages/index'
				});
			}
		},
		methods: {
			refundInfo(item){
				var that = this
				that.goodsId = item.orderDetailId;
				that.$nextTick(function() {
					that.$refs.refundInfo.getData();
					that.$forceUpdate()
				});
				that.hiddenInfo = false
			},
			refundChange(e){
				console.log(e);
			},
			change(e) {
				this.value = e
			},
			//退款
			apply(item){
				
				this.showRefund = false
				this.refundGoods = item
			},
			
			// 总价
			totalPrice(item) {
				let price = 0;
				for (var i = 0; i < item.length; i++) {
					price = Number(item[i].number * item[i].price + price)
				}
				return price.toFixed(2);
			},
			//立即付款
			toPay(item) {
				if(item.type == 0){
					var price = this.totalPrice(item.detailList)
					var now = Date.parse(new Date());
					var end = Date.parse(new Date(item.overTime));
					if(now<end){
						uni.navigateTo({
							url: '/pages/order/pay/index?orderId=' + item.id + '&price=' + price + '&name=' + item.detailList[0]
								.productName+'&time='+item.overTime+'&type=0'
						})
					}else{
						uni.showToast({
							title:'订单支付时间已过，暂不可支付',
							icon:'none'
						})
					}
					
				}else{
					var price = item.orderAmount * this.numbers
					var now = Date.parse(new Date());
					var end = Date.parse(new Date(item.overTime));
					if(now<end){
						uni.navigateTo({
							url: '/pages/order/pay/index?orderId=' + item.id + '&price=' + price + '&name=' + item.combinationName+'&time='+item.overTime+'&type=1'
						})
					}else{
						uni.showToast({
							title:'订单支付时间已过，暂不可支付',
							icon:'none'
						})
					}
					
				}
				
			},
			findDetails(orderNo) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.uni_request({
					url: '/user/order/detail',
					data:{
						orderId:orderNo,
					},
					method: 'GET',
					success: (res) => {
						
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							this.order = res.data.data
							// this.gData = this.order.province+'-'+this.order.city+'-'+this.order.district+' '+this.order.addr
							// this.imgList.push(res.data.data.takeGoodsQrCode)
						} else {
							this.$alert(res.data.msg, {
								showCancel: false
							}, () => {
								uni.redirectTo({
									url: '/pages/order/index'
								});
							});
						}
					}
				})
				
				
			},
			confirmReceipt(id) {
				this.$alert('确定已收货吗？', {}, () => {
					uni.showLoading({
						title: '处理中...',
						mask: true
					});
					this.uni_request({
						url: '/user/order/receiveGoods/'+id,
						method: 'POST',
						success: (res) => {
							uni.hideLoading()
							if (res.data.code == 0 || res.data.code == 200) {
								this.findDetails(this.order.orderId);
								this.$alert('操作成功', {
									showCancel: false
								});
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								})
							}
						}
					})
					
					
				});
			},
			orderCancel() {
				this.$alert('确定取消订单吗？', {}, () => {
					uni.showLoading({
						title: '处理中...',
						mask: true
					});
					this.uni_request({
						url: '/user/order/cancel/'+this.order.orderId,
						method: 'GET',
						success: (res) => {
							if (res.data.code == 0 || res.data.code == 200) {
								uni.hideLoading();
								this.findDetails(this.order.orderId);
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								})
							}
						}
					})
					
					
				});
			},
			getExpress(){
				var that = this;
				if(!that.order.expressNum){
					that.$alert('暂无物流信息', {
						showCancel: false
					});
					return
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.uni_request({
					url:"/express/userExpressInfo",
					method:'POST',
					data:{
						expressNum:that.order.expressNum,
						phone:that.order.mobile 
					},
					success: (res) => {
						uni.hideLoading()
						if(res.data.code == 0){
							that.wlData = res.data.data;
							that.show = true;
							
						}else{
							that.$alert('暂无物流信息', {
								showCancel: false
							});
						}
						
					}
				})
			},
			
			orderRefund() {
				if(this.value == ''){
					uni.showToast({
						icon:'none',
						title:'请选择退款理由'
					})
					return
				}
				this.$alert('确定申请退款吗？', {}, () => {
					uni.showLoading({
						title: '提交中...',
						mask: true
					});
					this.uni_request({
						url: '/user/order/refundGoods',
						method: 'POST',
						data:{
							orderDetailId:this.refundGoods.orderDetailId,
							refundReason:this.range[this.value].text
						},
						success: (res) => {
							uni.hideLoading()
							if (res.data.code == 0 || res.data.code == 200) {
								this.showRefund = true
								this.findDetails(this.order.orderId);
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						}
					})
					
				});
			}
		}
	}
</script>

<style lang="scss">
	.form-wrap{
		width: 100%;
		margin: 0 20px;
		padding: 30px 20px 0;
		border-top: 1px solid $border-color;
		.row{
			@extend %flex-align-center;
			justify-content: space-between;
			margin-bottom: 20px;
			.tit{
				font-size: 15px;margin-right: 20px;
			}
			text{color: #e93933;font-size: 23px;}
		}
	}
	.popBox{
		width: 50vw;
	}
	.title {
		font-size: 30px;
		color: #757575;
		line-height: 68px;
	}

	.order-header {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 20px 0;
		border-bottom: 1px solid $border-color;

		.orderno {
			font-size: 18px;
			color: #333;
		}

		.btn-wrap {
			@extend %flex-align-center;

			.btn {
				margin-left: 10px;
				width: 118px;
				height: 28px;
				line-height: 28px;
				font-size: 12px;
				text-align: center;
				cursor: pointer;
				color: #757575;
				border: 1px solid #757575;
				transition: all .3s;

				&.btn-primary {
					background-color: $color-primary;
					color: #FFFFFF;
					border-color: $color-primary;

					&:hover {
						background-color: $color-primary;
						color: #FFFFFF;
						border-color: $color-primary;
						opacity: .9;
					}
				}

				&:hover {
					color: #fff;
					background-color: #757575;
					border-color: #757575;
				}
			}
		}
	}

	.order-status {
		color: #b0b0b0;
		font-size: 18px;
		margin: 25px 0;

		&.warnging {
			color: $color-primary;
		}

		&.green {
			color: $color-success;
		}
	}

	.express-wrap {
		margin: 15px 0;
		line-height: 30px;
		border-bottom: 1px solid #cfeeab;

		.item {
			font-size: 12px;
			color: #757575;
		}

		.link {
			cursor: pointer;
			margin-right: 10px;

			.icon {
				font-size: 11px;
				margin-left: 2px;
			}

			&:hover {
				color: $color-primary;
			}
		}
	}

	.goods-wrap {
		margin-top: 20px;

		.goods {
			color: $text-color;
			height: 90px;
			border-bottom: 1px solid $border-color;
			@extend %flex-align-center;
			position: relative;
			.goodsBtn{
				position: absolute;
				right: 20px;bottom: 5px;
				.btn{
					cursor: pointer;
					text-align: center;
					color: #757575;
					border: 1px solid #757575;
					width: 118px;
					height: 28px;
					line-height: 28px;
				}
			}
			.goodsInfo{
				display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
			}
			.thumb {
				width: 80px;
				height: 80px;
			}
			.subtotal{
				margin-left: 20px;
				margin-top: 25px;
			}
			.name {
				color: $text-color;
				margin-left: 20px;
				min-width: 300px;
				max-width: 600px;
				padding-right: 20px;

				&:hover {
					color: $color-primary;
				}
			}
		}
	}

	.other-details {
		min-height: 120px;
		padding: 30px 0 12px;
		border-bottom: 1px solid $border-color;

		.detail-title {
			margin-bottom: 15px;
			font-size: 18px;
			color: #333;
		}

		.item {
			color: #757575;
			@extend %flex-align-center;

			.name {
				font-weight: bold;
				padding: 3px 0;
				padding-right: .3em;
			}
		}
	}

	.total-amount {
		padding-top: 30px;

		.item {
			@extend %flex-align-center;
			justify-content: flex-end;
			padding: 5px 0;

			.name {
				color: #757575;
			}

			.value {
				min-width: 120px;
				text-align: right;
				color: $color-primary;
			}

			.pay-amount {
				font-size: 30px;
			}
		}
	}
</style>
